<template>      <!--审核页面-->

  <div class="allBox">
    <div class="webPageTitle">用户身份审核</div>
      <div class="leftBox">
        <div class="leftTitle">
          <div class="dataTitle">用户个人信息审核表</div>

            <div style="float: right;width: 200px" class="myFromBox">
              <Input v-model="lookupNta"   placeholder="请输入要查询的用户国籍">
              <Button slot="append" icon="ios-search" @click="selectBut"></Button>
              </Input>
            </div>
            <div style="float: right;width: 210px" class="myFromBox">
              <Input v-model="selcetInput"   placeholder="请输入要查询的用户证件号">
                <Button slot="append" icon="ios-search" @click="selectBut"></Button>
              </Input>
            </div>
          <div style="float: right;" class="myFromBox">
            <DatePicker  @on-clear="clearTime"  type="datetimerange"  format="yyyy年MM月dd日"  placement="bottom-end" placeholder="请选择日期" v-model="searchTime"  @on-ok="clickTime" style="width: 240px"></DatePicker>
          </div>
            <div style="float: right;" class="myFromBox">
              <Select v-model="opnStu"  style="width:150px"  @on-change="dataList(1)" placeholder="全部状态">
                <Option v-for="item in uStatus" :value="item.value" :key="item.value">{{ item.label }}</Option>
              </Select>
            </div>
          <div style="float: right;" class="myFromBox">
            <Select v-model="queryIdType"  style="width:150px"  @on-change="dataList(1)" placeholder="全部证件类型">
              <Option v-for="item in idTypeItem" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>

        </div>
        <table width="100%" cellspacing="0"  cellpadding="0" class="tableBg">
          <tr  class="tableTrBg"  >
            <th width="5%">序号</th>
            <th width="7%">用户编号</th>
            <th width="10%">姓名</th>
<!--
            <th width="10%">国籍</th>
-->
            <th width="10%">证件类型</th>
            <th width="10%">证件号</th>
            <th width="10%">手机号</th>
            <th width="10%">状态</th>
            <th width="10%">申请时间</th>
            <th width="20%">操作</th>
          </tr>
          <tr @click="dataMouseover(index)"  class="rowHove" style="height: 48px;" v-for="(item,index) in data1">
            <td>{{index+1}}</td>
            <td>{{item.userId}}</td>
            <td>{{item.name}}</td>
<!--
            <td>{{item.nationality}}</td>
-->
            <td>
              <p v-if="item.certificateType == 0">身份证</p>
              <p v-if="item.certificateType == 1">护照</p>
              <p v-if="item.certificateType == 2">驾驶证</p>
              <p v-if="item.certificateType == 3">军官证</p>
              <p v-if="item.certificateType == 4">香港身份证</p>
              <p v-if="item.certificateType == 5">澳门身份证</p>
            </td>
            <td>{{item.certificateNo}}</td>
            <td>
              <p v-if="item.mobile == null">无</p>
              <p v-else>{{item.mobile}}</p>
            </td>
            <td>
              <p v-if="item.status == 0">未审核</p>
              <p v-if="item.status == 1">审核中</p>
              <p v-if="item.status == 2">已审核</p>
              <p v-if="item.status == 3">审核失败</p>
            </td>
            <td>{{item.createTm}}</td>
            <td >
                <span v-if="item.status == 0">
                    <p>未请求审核</p>
                </span>
              <span v-if="item.status == 1">
                      <Button type="success" size="small" @click="optionPass(index,0)">审核通过</Button>
                      <Button type="error"  size="small" @click="showno(item.userId)">审核拒绝</Button>
                </span>
              <span v-if="item.status == 2">
                      <p>已通过</p>
                </span>
              <span v-if="item.status == 3">
                      <Button  type="info" size="small" @click="optionPass(index,2)">重新审核</Button>
                </span>
            </td>
          </tr>
        </table>
        <div  class="pageBox" >
          <Page :total="total" :page-size="rows" show-total @on-change="dataList"  class="pageStyle"></Page>
        </div>
      </div>
      <div class="rightBox">
        <div  class="accessory">相关附件信息</div>
        <div class="media">
          <div class="mediaBoxs">
            <!--<video width="100%"  v-bind:src="data2.cardVideoUrl"   height="100%" controls autoplay></video>-->
            <img title="证件照" :src="data2.cardVideoUrl" />
            <button class="rotateButtom" @click="rotateClick(2)">点击放大</button>
          </div>
          <div class="mediaBoxs">
            <img title="证件照正面" :src="data2.fontImg" />
            <button class="rotateButtom" @click="rotateClick(0)">点击放大</button>
          </div>
          <div class="mediaBoxs">
            <img  title="证件照反面" :src="data2.backImg"/>
            <button class="rotateButtom" @click="rotateClick(1)">点击放大</button>
          </div>
          <div class="mediaBoxs">
            <img  title="活动图片" :src="data2.activeImg"/>
            <button class="rotateButtom" @click="rotateClick(3)">点击放大</button>
          </div>
        </div>
      </div>
    <!--遮盖层-->
    <div v-show="showPop1" class="popBox" @click="closePop"></div>
    <div v-show="contPop1" class="imgPop">
      <div>
        <img v-if="optionImgType == 0" id="target0"   :src="data2.fontImg">
        <img v-if="optionImgType == 1" id="target1"  :src="data2.backImg"/>
        <img v-if="optionImgType == 2" id="target2" :src="data2.cardVideoUrl"/>
        <img v-if="optionImgType == 3" id="target3" :src="data2.activeImg"/>
      </div>
      <button  class="rotateButtom" @click="rotates">旋转90度</button>
    </div>
    <!---->
    <div v-if="noPop" id="refusePop">
      <div class="popTitle " style="margin-bottom: 10px;color: #000">审核拒绝<img class="imgStyle" src="../../assets/close.png" @click="closePop"></div>
      <Input v-model="refuseText" type="textarea"  :autosize="{minRows: 2,maxRows: 5}"  autofocus  placeholder="请说明拒绝提款的原因！"></Input>
      <p style="color: red;text-align: left">拒绝原因为必填！</p>
      <Button type="error" long style="margin-top: 10px" @click="optionPass(0,1)">拒绝通过</Button>
    </div>
    <!--读取API错误-->
    <template>
      <Modal v-model="redAPIModal" width="360">
        <p slot="header" style="color:#f60;text-align:left">
          <Icon type="information-circled"></Icon>
          <span>{{redAPIModalTit}}</span>
        </p>
        <div style="text-align:left">
          <p>错误信息：</p>
          <p>{{redAPIModalCen}}</p>
        </div>
        <div slot="footer">
          <Button type="error" size="large" long  @click="redAPIModalFun">确定</Button>
        </div>
      </Modal>

    </template>
  </div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return   {
			  index:'',
        noPop:false,
        opnStu:'',
        refuseText:'',
        queryIdType:'',
        idTypeItem:[
          {
            value:' ',
            label:'全部证件类型'
          },
          {
            value:'0',
            label:'身份证'
          },
          {
            value:'1',
            label:'护照'
          },
          {
            value:'2',
            label:'驾驶证'
          },
          {
            value:'3',
            label:'军官证'
          },
          {
            value:'4',
            label:'香港身份证'
          },
          {
            value:'5',
            label:'澳门身份证'
          },

        ],
        //用户状态
        uStatus:[
          {
            value:' ',
            label:'全部状态'
          },
          {
            value: '1',
            label: '提交认证审核'
          },
          {
            value: '2',
            label: '认证通过'
          },
          {
            value: '3',
            label: '认证失败'
          },
        ],
        showPop1:false,
        contPop1:false,
        selcetInput:null, //模糊查询内容
        total:0,
        rows:10,
				data1:[],
        videoSrc:'',
        rowIndex:'',
        data2:[],
        zuserId:'',
        page:1,
        current:'',
        optionImgType:'',  //为0 表示正面照 ；1 为反面照
        aaa:'',
        redAPIModal:false,
        redAPIModalTit:'',
        redAPIModalCen:'',
        searchTime:'',
        lookupNta:'', //查询国籍
        optionTime:{
          disabledDate(date){
            return date  && date.valueOf() > Date.now() ;
          }
        },
			}
		},
    methods:{
		  /*ID查询*/
      selectBut:function () {
        this.dataList('1')
      },
		  /*打开拒绝备注*/
		  showno:function(index){
        this.noPop = true;
        this.showPop1 =true;
        this.index = index;
      },
      /*遮盖层关闭*/
      closePop:function () {
        this.showPop1=false;
        this.contPop1 = false;
        this.noPop = false;
      },
		  /*读取数据*/
      dataList: function (page) {
        this.aaa = page
        var _self = this;
        _self.opnStu = _self.opnStu.replace(/(^\s*)|(\s*$)/g, "" );
        _self.page = page;
        _self.$http.post(_self.service + '/user/list',{
            status:_self.opnStu,
            page:page,
            rows:_self.rows,
            certificateNo:_self.selcetInput, //身份证件号
            startTime:_self.searchTime[0],
            endTime:_self.searchTime[1],
            nationality:_self.lookupNta,
            certificateType:_self.queryIdType
          }).then(function (res) {
            if(res.data.code == '001'){
              var tableData = res.data.result.data;
              for( var i in tableData){
                var dataTm = new Date(tableData[i].createTm);
                var tiem = _self.formatDate(dataTm,'yyyy-MM-dd hh:mm');
                tableData[i].createTm =tiem
              }
              _self.data1 = tableData;
              _self.total = res.data.result.total;
            }else{
              _self.modalFun('读取用户信息错误',res.data.msg)
            }
          })
      },
      /*通过/拒绝 审核*/
      optionPass:function (index,option) {
          var _self = this;
          var userId = _self.data1[index].userId;  //用户编号   0：成功    1：失败  2:重新审核
          var status ;
          if(option == 0){
              status = 2; //成功
          }else if(option == 1){
            userId = this.index
            status = 3   //拒绝

            if(this.refuseText.replace(/(^\s*)|(\s*$)/g, "" ) == ''){

              return
            }

          }else if(option == 2){
            status = 1 //重新
          }

          _self.$http.post(_self.service + '/user/status/update',{
            userId:userId,
            status:status,
            reason:_self.refuseText
          }).then(function (res) {
            if(res.data.code == '001'){
              _self.noPop = false
              _self.showPop1 =false
              _self.refuseText = ''

              _self.dataList(_self.page);
            }else{
              _self.modalFun('用户审核错误',res.data.msg)
            }

          })
      },
      /*点击特定行 多媒体信息展示*/
      dataMouseover:function (index) {
        var _self = this;
        _self.data2 = _self.data1[index]
      },
      /*图片放大*/
      rotateClick:function(type){
          var _self = this;
          _self.showPop1 =true;
          _self.contPop1 =true;
        if(type == 0 ){
            _self.optionImgType = '0';
          }else if(type == 1){
            _self.optionImgType = '1';
          }else if(type == 2){
            _self.optionImgType = '2';
          }else if(type == 3){
          _self.optionImgType = '3';
        }

      },
      /*旋转90度*/
      rotates:function () {
        var _self = this;
        var imgObj;
        if(_self.optionImgType == 0){
          imgObj = document.getElementById('target0');
        }else if(_self.optionImgType == 1){
          imgObj = document.getElementById('target1');
        }else if(_self.optionImgType == 2){
          imgObj = document.getElementById('target2');
        }else if(_self.optionImgType == 2){
          imgObj = document.getElementById('target3');
        }
        _self.current = (_self.current+90)%360;
        imgObj.style.transform = 'rotate('+_self.current+'deg)';
      },
      /*获取浏览器高度对 table的 row 显示进行数量控制 */
      tableRowH:function(){
        var _self = this;
        var winHeight = document.documentElement.clientHeight;
        _self.rows = Math.floor((winHeight - (40+50+50+100))/48)-1;
      },
      /*Modal弹出层*/
      modalFun:function (modTit,modCen) {
        this.redAPIModal = true;
        this.redAPIModalTit = modTit;
        this.redAPIModalCen = modCen;
      },
      redAPIModalFun:function () {
        this.redAPIModal = false
      },
      /*获取选中日期*/
      clickTime:function () {
        for(var i in this.searchTime){
          let dataTm  = new Date(this.searchTime[i]);
          let time =  this.formatDate(dataTm,'yyyy-MM-dd hh:mm');
          var oldTime = (new Date(time)).getTime();
          this.searchTime[i] = oldTime
        }
        if(this.searchTime[0]  ==  this.searchTime[1]){  //选择一天时
          this.searchTime[1] = this.searchTime[1]+86400000
        }else{
          this.searchTime[1] = this.searchTime[1] + (86400000-1)
        }
        this.dataList(1)
      },
      clearTime:function () {
        this.searchTime[0] = '';
        this.searchTime[1] = '';
        this.dataList(1)
      }
    },


    created:function(){
      this.tableRowH();
		  this.dataList('1')
    },
	}
</script>
<style>

  #refusePop{ padding: 0 20px 10px 20px;width: 500px;height: auto;float: left;position: absolute;z-index: 9999;background: #fff;top: 300px;left: 25%;border-radius: 5px;box-shadow: 0 0 20px rgba(255,255,255,0.8); }
  .popTitle{height: auto;line-height: 80px;font-size: 28px;border-bottom: 1px solid #e3e3e3;position: relative;}
  .imgStyle{position: absolute;top:25px;right: 25px;width: 25px;cursor: pointer}

  .imgPop{
    position: fixed;
    z-index: 9999;
    top: 10%;
    left: 10%;
  }
  .imgPop img{
    width: auto;
    height: auto;
    max-width: 1000px;
    max-height: 500px;
  }
   .popBox{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9998;

  }

  .contBox{
    float: left;
    width: 100%;
    margin-top: 20px;
    margin-left: 20px;
  }
  .leftBox{
    float: left;
    width: 70%;
    border: 1px solid #999;
  }
  .rightBox {
    float: right;
    width: 23%;
  }

  .accessory{
    float: left;
    width: 100%;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    background: #aaaaaa;

  }
  .media{
    width: 100%;
    height: 800px;
    border: 1px solid #999;
  }
  .mediaBoxs{
    width: 80%;
    height: 180px;
    margin-top: 5px;
    float: left;
    margin-left: 5%;
    border: 1px solid;
    position: relative;
  }
  .mediaBoxs img{
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%
  }
  .pageStyle{
    float: right;
    margin-right: 20px;
    margin-bottom: 10px;

  }
  .tableTrBg{
    background: #e3e3e3;
    height: 50px
  }
  .rowHove:hover{
      background: #eee;
  }
  .tableBg{
    height: 50px;
    border: 1px solid #999;
  }
  .pageBox{
    float: left;
    width: 100%;
    margin-top: 10px
  }
  .rotateButtom{
    position: absolute;
    top: 10px;
    left: -80px;
  }
</style>
